<template>
  <div class="system-config-container">
    <el-card class="box-card">

      <el-form ref="configForm" :model="configForm" label-width="180px" class="config-form">

        <!-- 基本设置 -->
        <el-divider content-position="left">基本设置</el-divider>

        <el-form-item label="系统名称" prop="systemName">
          <el-input v-model="configForm.title" placeholder="请输入系统名称" maxlength="50" show-word-limit>
          </el-input>
        </el-form-item>

        <el-form-item label="系统Logo" prop="systemLogo">
          <el-upload class="logo-uploader" :http-request="customUpload" action="#" :show-file-list="false"
            :on-success="handleLogoSuccess" :before-upload="beforeLogoUpload">
            <img v-if="configForm.icon" :src="configForm.icon" class="logo">
            <i v-else class="el-icon-plus logo-uploader-icon"></i>
          </el-upload>
          <div class="logo-tip">建议尺寸：200x60px，支持PNG、JPG格式</div>
        </el-form-item>

        <el-form-item label="系统描述" prop="systemDesc">
          <el-input type="textarea" v-model="configForm.description" :rows="3" placeholder="请输入系统描述" maxlength="200"
            show-word-limit>
          </el-input>
        </el-form-item>

        <!-- 安全设置 -->
        <el-divider content-position="left">安全设置</el-divider>

        <el-form-item label="密码最小长度" prop="passwordMinLength">
          <el-input-number v-model="configForm.min_pwd" :min="6" :max="20" :step="1">
          </el-input-number>
        </el-form-item>

        <el-form-item label="密码复杂度要求" prop="passwordComplexity">
          <el-checkbox-group v-model="configForm.pwd_complex">
            <el-checkbox label="0">必须包含大写字母</el-checkbox>
            <el-checkbox label="1">必须包含小写字母</el-checkbox>
            <el-checkbox label="2">必须包含数字</el-checkbox>
            <el-checkbox label="3">必须包含特殊字符</el-checkbox>
          </el-checkbox-group>
        </el-form-item>

        <el-form-item label="登录在线时长(天)" prop="">
          <el-input-number v-model="configForm.token_continue_time" :min="3" :max="10" :step="1">
          </el-input-number>
        </el-form-item>

        <el-form-item label="登录失败锁定" prop="loginLock">
          <el-switch v-model="configForm.login_disabled" active-text="启用" inactive-text="禁用">
          </el-switch>
        </el-form-item>

        <el-form-item label="登录失败次数" prop="loginFailCount" v-if="configForm.login_disabled">
          <el-input-number v-model="configForm.login_error_number" :min="3" :max="10" :step="1">
          </el-input-number>
          <span class="unit-text">次</span>
        </el-form-item>

        <el-form-item label="锁定时间" prop="lockTime" v-if="configForm.login_disabled">
          <el-input-number v-model="configForm.login_disabled_time" :min="5" :max="60" :step="5">
          </el-input-number>
          <span class="unit-text">分钟</span>
        </el-form-item>

        <!-- 日志设置 -->
        <el-divider content-position="left">日志设置</el-divider>

        <el-form-item label="操作日志保留天数" prop="logRetentionDays">
          <el-input-number v-model="configForm.log_reserve_time" :min="0">
          </el-input-number>
          <span class="unit-text">天</span>
        </el-form-item>

        <el-form-item label="自动清理过期日志" prop="auto_clean_log">
          <el-switch v-model="configForm.auto_clean_log" active-text="启用" inactive-text="禁用">
          </el-switch>
        </el-form-item>

        <el-form-item label="清理时间" prop="cleanLogTime" v-if="configForm.auto_clean_log">
          <el-time-picker v-model="configForm.log_deal_time" format="HH:mm" placeholder="选择时间">
          </el-time-picker>
        </el-form-item>

        <!-- 提交按钮 -->
        <el-form-item>
          <el-button :disabled="!permissionInfo.oper" type="primary" @click="submitForm('configForm')">保存配置</el-button>
          <!-- <el-button @click="resetForm('configForm')">重置</el-button> -->
        </el-form-item>
      </el-form>
      <br>

    </el-card>
  </div>
</template>

<script>
import { updateConfig, fileUpload } from "@/http/api/index";

export default {
  name: 'SystemConfig',
  data() {
    return {
      permissionInfo: {
        select: false,
        oper: false
      },

      configForm: {
        title: "",
        icon: "",
        description: "",
        min_pwd: 1,
        pwd_complex: [],
        login_disabled: false,
        login_error_number: 1,
        login_disabled_time: 0,
        log_reserve_time: 1,
        log_deal_time: 1,
        token_continue_time: 3
      },
      rules: {
        systemName: [
          { required: true, message: '请输入系统名称', trigger: 'blur' },
          { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
        ],
        systemDesc: [
          { max: 200, message: '长度不能超过 200 个字符', trigger: 'blur' }
        ],
        passwordMinLength: [
          { required: true, message: '请设置密码最小长度', trigger: 'blur' }
        ],
        loginFailCount: [
          { required: true, message: '请设置登录失败次数', trigger: 'blur' }
        ],
        lockTime: [
          { required: true, message: '请设置锁定时间', trigger: 'blur' }
        ],
        logRetentionDays: [
          { required: true, message: '请设置日志保留天数', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    permissionCheck() {
      let permissionList = this.$store.getters.roleInfo.config;
      Object.assign(this.permissionInfo, permissionList);
      return;
    },

    // 文件上传
    customUpload(file) {
      const formData = new FormData()
      formData.append('file', file.file)

      fileUpload(formData).then(res => {
        if (res.code == 200) {
          this.configForm.icon = res.filePath;
          this.$message.success("上传成功!");
        }
      }).catch(error => {
        this.$message.error("上传失败!");
      })

    },

    initData() {
      this.configForm = Object.assign({}, this.$store.getters.baseInfo || {});
    },

    // Logo上传成功
    handleLogoSuccess(res, file) {
      if (res.code === 200) {
        this.configForm.systemLogo = res.data
      } else {
        this.$message.error('上传失败')
      }
    },
    // Logo上传前的验证
    beforeLogoUpload(file) {
      const isImage = file.type === 'image/jpeg' || file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isImage) {
        this.$message.error('上传Logo只能是 JPG/PNG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传Logo图片大小不能超过 2MB!')
      }
      return isImage && isLt2M
    },
    // 提交表单
    submitForm() {
      let param = Object.assign({}, this.configForm);
      param.pwd_complex = param.pwd_complex.join("");
      param.login_disabled = param.login_disabled + 0;
      param.auto_clean_log = param.auto_clean_log + 0;
      console.log(param, "--param");
      updateConfig(param).then(res => {
        if (res.code == 200) {
          this.$store.commit("SET_CONFIG", param);
          this.$message.success('配置保存成功');
        }
      })


    },
    // 重置表单
    resetForm(formName) {
      this.$refs[formName].resetFields()
      this.configForm.systemLogo = ''
    }
  },
  mounted() {
    this.permissionCheck();
    if (this.permissionInfo.select) {
      this.initData();
    }
  }
}
</script>

<style lang="scss">
.system-config-container {
  height: 95%;
  padding-top: 10px;

  .box-card {
    max-width: 1000px;
    margin: 0 auto;
    height: 100%;

    .el-card__body {
      height: 100%;
      overflow-y: auto;

    }
  }

  .logo-uploader {
    .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;

      &:hover {
        border-color: #409EFF;
      }
    }
  }

  .logo-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 200px;
    height: 60px;
    line-height: 60px;
    text-align: center;
  }

  .logo {
    width: 200px;
    height: 60px;
    display: block;
    object-fit: contain;
  }

  .logo-tip {
    font-size: 12px;
    color: #909399;
    margin-top: 5px;
  }

  .unit-text {
    margin-left: 10px;
    color: #606266;
  }

  .el-divider {
    margin: 24px 0;
  }

  .el-divider__text {
    font-size: 16px;
    font-weight: bold;
    color: #303133;
  }
}
</style>
